<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>Cluster Admin</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/component/toast/toast.min.css" />
    <style>
        .layui-tab {
            margin: 10px 10px;
        }

        .layui-tab-title {
            height: 30px;
        }
        .layui-tab-title li {
            line-height: 30px;
            padding: 0 10px;
        }
        .layui-tab-title .layui-this:after {
            height: 31px;
        }

        .layui-tab-content {
            padding: 5px 0;
        }

        .ace_editor.ace_autocomplete {
            width: 600px!important;
        }

        .ace_tooltip {
            border: 1px solid #aea0a0;
            color: #5e4a4a;
            font-size: 12px;
            width: 400px;
            white-space: normal;
        }
        .kerberos_span {
            display: none;
        }
    </style>
</head>
<body class="pear-container">
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="pear-btn pear-btn-primary pear-btn-md" onclick="Cluster.newClusterWin()">
            <i class="layui-icon layui-icon-add-1"></i>
            新建集群
        </button>
    </div>
</script>

<script type="text/html" id="statusTpl">
    {{#  if(d.status){ }}
    <input type="checkbox" name="status" lay-skin="switch" checked lay-text="开启|禁用" value={{ d.id }}
           lay-filter="status">
    {{#  } else { }}
    <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|禁用" value={{ d.id}}
           lay-filter="status">
    {{#  } }}
</script>

<input type="hidden" id="confDefaultValue" th:value="${confDefaultValue}">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-col-md1">
                    <label class="layui-form-label">集群 Code</label>
                </div>
                <div class="layui-col-md2">
                    <input type="text" name="code" placeholder="" class="layui-input">
                </div>
                <div class="layui-col-md2" style="padding-left: 10px">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="cluster-table" lay-filter="cluster-table"></table>
    </div>
</div>

<!--日志显示窗口-->
<div id="newClusterDiv" title="New Cluster" style="display: none;">
    <form class="layui-form" action="javascript:void(0);" style="margin: 10px" lay-filter="newClusterForm">
        <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md2">
                <label class="layui-form-label form-label">集群 Code</label>
            </div>
            <div class="layui-col-md2">
                <input type="text" name="code" hover placeholder="Cluster Code" autocomplete="off" id="cluster_code" class="layui-input">
            </div>
            <div class="layui-col-md2">
                <label class="layui-form-label form-label">集群名</label>
            </div>
            <div class="layui-col-md2">
                <input type="text" name="name" hover placeholder="Cluster Name" autocomplete="off" id="cluster_name" class="layui-input">
            </div>
            <div class="layui-col-md2">
                <label class="layui-form-label form-label">Kerberos认证</label>
            </div>
            <div class="layui-col-md2">
                <select name="kerberosEnabled" lay-filter="kerberosEnabled" id="kerberosEnabled" class="layui-input">
                    <option value="true">启用</option>
                    <option value="false" selected>关闭</option>
                </select>
            </div>
            <div class="layui-col-md2">
                <label class="layui-form-label form-label"><span class="icon pear-icon pear-icon-prompt" style="font-size: 13px;" id="schedulerTypeTip"></span>&nbsp;调度类型</label>
            </div>
            <div class="layui-col-md2">
                <select name="schedulerType" lay-filter="schedulerType" id="schedulerType" class="layui-input">
                    <option value="yarn">Yarn</option>
                    <option value="kubernetes">Kubernetes</option>
                </select>
            </div>
            <div class="layui-col-md2">
                <label class="layui-form-label form-label">启用集群</label>
            </div>
            <div class="layui-col-md2">
                <select name="status" class="layui-input">
                    <option value="true">启用</option>
                    <option value="false">关闭</option>
                </select>
            </div>
            <div class="layui-col-md2 kerberos_span" >
                <label class="layui-form-label form-label">Kerberos 账号</label>
            </div>
            <div class="layui-col-md2 kerberos_span">
                <input type="text" name="kerberosUser" hover placeholder="Kerberos 账号" autocomplete="off" id="kerberos_user" class="layui-input">
            </div>
            <div class="layui-col-md2 kerberos_span">
                <label class="layui-form-label form-label">Kerberos Ketab</label>
            </div>
            <div class="layui-col-md5 kerberos_span">
                <input type="file" name="kerberosKeytab" id="kerberosKeytab" class="layui-input" style="padding-top: 5px; width: 245px; display: inline;">
                <span>
                    <a id="kerberosDown" href="javascript:Cluster.downloadKeytab()"></a>
                </span>
            </div>
        </div>
    </form>

    <div class="layui-tab" lay-filter="config_tabs">
        <ul class="layui-tab-title">
            <li class="layui-this">jobserver.conf</li>
            <li>spark.conf</li>
            <li>core-site.xml</li>
            <li>hdfs-site.xml</li>
            <li>hive-site.xml</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="jobserverEditor" style="width: 100%;" class="editor"></div>
            </div>
            <div class="layui-tab-item">
                <div id="sparkEditor" style="width: 100%;" class="editor"></div>
            </div>
            <div class="layui-tab-item">
                <div id="coreEditor" style="width: 100%;" class="editor"></div>
            </div>
            <div class="layui-tab-item">
                <div id="hdfsEditor" style="width: 100%;" class="editor"></div>
            </div>
            <div class="layui-tab-item">
                <div id="hiveEditor" style="width: 100%;" class="editor"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="cluster-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/javascript" src="/component/jquery.min.js"></script>
<script type="text/javascript" src="/component/layui/layui.js"></script>
<script type="text/javascript" src="/component/pear/pear.js"></script>
<script src="/common/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/mode-log.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/mode-text.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/mode-properties.js" type="text/javascript" charset="utf-8"></script>
<script src="/common/ace/theme-all.js" type="text/javascript" charset="utf-8"></script>
<script src="/component/toast/toast.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/sparkconf.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/hoodie.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/cluster.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
